<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
				<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<style type="text/css">
			table,
			th,
			td {
				border: 2px solid #000000;
			}
		</style>
	</head>
	<body>
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">清点比赛人员名单</h3>
			</div>
			<div class="panel-body">
				<table class="table table-hover" border="1">
					<thead>
						<th style="text-align: center;">选手号</th>
						<th style="text-align: center;">选手姓名</th>
						<th style="text-align: center;">地区</th>
					</thead>
					<tbody>
						<tr v-for="user in user_list">
							<td style="text-align: center;">{{user[0]}}</td>
							<td style="text-align: center;">{{user[1]}}</td>
							<td style="text-align: center;">{{user[2]}}</td>
						</tr>
					</tbody>
				</table>
				<a href="score.html">
				<div style="text-align: center;">
					<button type="button" class="btn btn-primary">开始比赛</button>
				</div>
				</a>
			</div>
		</div>
	</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".container",
				data: {
					user_list: ""
				},
			})

			$(document).ready(function() {
				$.ajax({
					url: "1.php",
					type: "GET",
					success: (result) => {
						vm.user_list = JSON.parse(result).user_list;
					}
				})
			})
		</script>
	</body>
</html>
